<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12 this的指向选项卡</title>
    <style>
        .active {
            background: pink;
        }
        #list .con {
            width: 400px;
            height: 200px;
            border: 1px solid #ccc;
            display: none;
        }
    </style>
</head>

<body>
    <h1>11 this的指向</h1>
    <div id="list">
        <input type="button" class="active" value="新闻">
        <input type="button" value="体育">
        <input type="button" value="娱乐">
        <input type="button" value="搞笑">
        <div class="con" style="display: block;">新闻</div>
        <div class="con">体育</div>
        <div class="con">娱乐</div>
        <div class="con">搞笑</div>
    </div>
</body>
<script src="../common.js"></script>
<script>

    /* 
        this的指向：this指的是一个对象，函数被谁调用，指的就是谁，this经常解析成当前的
    */

    // 匿名函数：没有名字的函数，用在点击事件右侧；自调用
    // btn.onclick = function() {}

    // 自调用：什么完就立马调用:把功能模块写在自调用里面，全部都是局部变量，用完就自动销毁，性能就比较好
    (function () {
        // console.log(666);

        // 点击哪个哪个就高亮显示
        var list = getid('list');
        var btns = list.getElementsByTagName('input'); // 集合，数组(下标，属性length)
        var cons = list.getElementsByClassName('con'); // 集合，数组

        // 遇到数组少不了用循环
        for (var i = 0; i < btns.length; i++) { // 给按钮们绑定点击事件
            btns[i].index = i; // 绑定索引
            btns[i].onclick = function () { // 循环在前，点击在后
                console.log(this); // this：当前被点击的按钮
                // 排他：循环清空再设置单个显示
                for (var i = 0; i < btns.length; i++) {
                    btns[i].className = '';
                    cons[i].style.display = 'none';
                }
                this.className = 'active'; // 当前按钮高亮显示
                cons[this.index].style.display = 'block'; // 让当前按钮对应的盒子出现
            }
        }

    })();

</script>

</html>